<template>
  <section style="padding:10px;">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>日志列表</span>
            </div>
          </template>
          <div
            v-for="o in list"
            :key="o.name"
            :class="o.name == name ? 'active' : ''"
            class="list-item"
            @click="logSelect(o.name)"
          >
            <span>{{ o.name }}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="15">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>详细内容</span>
            </div>
          </template>
          <el-input v-model="des" type="textarea" :rows="30" :cols="15" readonly />
        </el-card>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import { getErrorLog } from '@/api/admin/errorlog'

export default {
  name: 'Errorlog',
  components: {

  },
  data() {
    return {
      list: [],
      des: '日志内容',
      name: ''
    }
  },
  computed: {

  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取日志列表
    async getList() {
      const res = await getErrorLog()
      this.list = res.data
      if (res.data.length > 0) {
        this.des = res.data[0].content
        this.logSelect(res.data[0].name)
      }
    },
    logSelect(name) {
      this.name = name
      this.list.forEach(res => {
        if (res.name === name) {
          this.des = res.content
        }
      })
    }

  }
}
</script>
<style scoped>
.list-item {
  font-size: 14px;
  cursor: pointer;
  padding: 5px;
}

.list-item.active {
  background: #ebf5ff;
}

.list-item:hover {
  background: #ebf5ff;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

</style>
